<template>
	<div>
		<router-link to="/">首页</router-link>
		&nbsp;&nbsp;
		<router-link to="/About">跳转-path模式</router-link>
		&nbsp;&nbsp;
		<router-link :to="{name:'About'}">跳转-命令路由</router-link>
		&nbsp;&nbsp;
		<router-link :to="{name:'About'}">命名视图体验</router-link>
		&nbsp;&nbsp;
		<router-link :to="{path:'/User', query:{id:12,name:'lesscode'}}">query 传参</router-link>
		&nbsp;&nbsp;
		<router-link :to="{name:'ParamsDemo', params:{id:12,name:'lesscode'}}">params 传参</router-link>
		&nbsp;&nbsp;
		<span @click="goback()">返回</span>
	</div>
	<div style="margin-top:15px;">
		<router-view></router-view>
	</div>
	<!-- 命名视图 -->
	<div style="margin-top:15px; background:gray;">
		<router-view name="routerView1"></router-view>
	</div>
</template>
<script setup>
import { useRouter } from "vue-router";
const router = useRouter();
function goback(){
	router.go(-1);
}
</script>
<style>
</style>
